<template>
  <!--我的标签-->
  <div>
    <el-row type="flex" justify="center">

      <el-col :span="22" style="margin:20px 0">


        <el-tag :key="tag.id"
                v-for="tag in dynamicTags"
                closable :disable-transitions="false"
                @click="changeValue(tag)"
                @close="handleClose(tag)">
          {{tag.name}}
        </el-tag>

        <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
                  @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "MyTags",
  data() {
    return {
      dynamicTags: [{id:1,name:'标签1'},{id:2,name:'标签2'}, {id:3,name:'标签3'}],
      inputVisible: false,
      inputValue: '',
      tempTag: '',
      // 是否是重复数据
      isRepeatedData: false,
      // 是否改变原来的值
      isChange: false,
      editTag:{}
    };
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.tempTag = ''
      this.inputVisible = true;
      this.inputValue = ''
      this.isChange = false

      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      this.isRepeatedData = false
      let inputValue = this.inputValue;
      // 去空格
      inputValue = inputValue.replace(/^\s\s*/, '').replace(/\s\s*$/, '')
      if (inputValue == '') {
        this.inputVisible = false
        return
      }
      // console.log(inputValue+'uuu:'+this.tempTag)
      // 判断新增的值是否重复
      let oldTags = [];
      for(let t of this.dynamicTags){
        oldTags.push(t.name)
      }
      console.log(oldTags)
      if (oldTags.indexOf(inputValue) != -1) {
        this.isRepeatedData = true
        this.$message.warning("该标签已经存在！")
        return
      } else {
        this.isRepeatedData = false
        // this.isChange = false
      }
      // 判断是否修改原有值，是 替换修改好的值，否新增
      if (this.isChange) {
        let index = -1;
        for (let t of this.dynamicTags){
          if(t.id == this.editTag.id){
            index = this.dynamicTags.indexOf(t);
          }
        }
        // console.log(index);
        //在这里发送修改标签的axios请求
        this.editTag.name = this.inputValue;
        this.dynamicTags[index] = this.editTag;
        this.inputVisible = false
        return
      }
      // 点击添加时，追加
      if (inputValue) {
        //这里发送添加的axios请求，获得新添加的tag的id  这里的15就是新添加的tag的id
        this.dynamicTags.push({id:15,name:inputValue});
        console.log(inputValue+'tt:'+this.dynamicTags)
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    changeValue(tag) {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
      this.inputValue = tag.name
      this.editTag=tag;
      this.tempTag = tag.name
      this.isChange = true
    }
  }
}
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>